<template>
  <view class="achieve">
    <van-sticky>
      <van-tabs :active="active" @change="active = $event.target.index">
        <view class="box-gap top-form">
          <view style="margin-bottom:20rpx;" v-if="active === 1 && achieveTeamList.length > 1">
            <van-cell title="选择领导人" :value="leader" is-link @click="achieveTeamPopupShow = true"></van-cell>
          </view>
          <view>
            <van-cell title="选择日期" :value="achieveDate" is-link @click="popupShow = true"></van-cell>
          </view>
        </view>
        <van-tab title="我的业绩">
          <my-tab :myAchieve="myAchieve" :year="achieveTime.year" :month="achieveTime.month"></my-tab>
        </van-tab>
        <van-tab title="团队业绩" v-if="get(info,'achieveQueryIsEnable') === 1">
          <group-tab v-if="isGorupTapShow" :myAchieve="myAchieve" :leaderInfo="leaderInfo"
            :year="achieveTime.year"
            :month="achieveTime.month">
          </group-tab>
        </van-tab>
      </van-tabs>
    </van-sticky>
    <van-popup :show="achieveTeamPopupShow" position="bottom" close-on-click-overlay
      @close="achieveTeamPopupShow = false">
      <van-picker show-toolbar :columns="achieveTeamList" @confirm="selectAchieveTeam"
        @cancel="achieveTeamPopupShow=false" />
    </van-popup>
    <van-popup :show="popupShow" :position="popupPosition||'bottom'" close-on-click-overlay @close="popupShow=false">
      <van-datetime-picker type="year-month" :min-date="startDay" :value="currentDate" @confirm="handleConfirm"
        @cancel="popupShow=false" :formatter="formatter" />
    </van-popup>
  </view>
</template>

<script>
  import { mapState } from 'vuex'
  import MyTab from './my-tab'
  import GroupTab from './group-tab'
  import {
    model
  } from '@/model';

  const {
    Member,
    PageBo
  } = model.collection;

  export default {
    name: '',
    components: {
      MyTab,
      GroupTab
    },
    data() {
      return {
        leaderInfo: {},
        active: 0,
        myAchieve: 0,
        achieveTeamPopupShow: false,
        leader: '领导人',
        achieveTeamList: [],
        achieveDate: '本月业绩',
        achieveTime: {
          year: 2021,
          month: 1
        },
        popupShow: false,
        startDay: new Date('2021-01-01').getTime(),
        currentDate: new Date().getTime(),
        formatter(type, value) {
          if (type === 'year') {
            return `${value}年`;
          }
          if (type === 'month') {
            return `${value}月`;
          }
          return value;
        },
      }
    },
    computed: {
      ...mapState('user', ['info']),
      isGorupTapShow () {
        if (this.popupShow && !this.achieveTeamPopupShow) {
          return false
        } 
        if(!this.popupShow && this.achieveTeamPopupShow) {
          return false
        }
        return true
      }
    },
    onLoad(options) {
      this.achieveTeamList = [];
      this.myAchieve = Number(options.integral);
      const getDate = new Date();
      this.achieveTime.year = getDate.getFullYear();
      this.achieveTime.month = getDate.getMonth() + 1;
      this.init();
    },
    methods: {
      init() {
        this.leaderInfo = {text:this.info.nickname,id:this.info.id};
        this.achieveTeamList.push({text:this.info.nickname,id:this.info.id});
        PageBo.sendApi('info', {
          params: {
            page: 'memberAchieveTeam'
          },
          data: {}
        }).then(res => {
          const {
            status,
            data
          } = res;
          if (status) {
            data.achieveTeamList.forEach(e => {
              this.achieveTeamList.push({
                text: e.nickname,
                id: e.id
              })
            });
          }
        });
      },
      selectAchieveTeam(e) {
        this.leader = e.detail.value.text;
        this.leaderInfo = e.detail.value;
        this.achieveTeamPopupShow = false;
      },
      getCurrentAchive() {
        const {
          year,
          month
        } = this.achieveTime
        Member.sendApi('achieveInfo', {
          params: {},
          data: {
            query: {
              year,
              month
            }
          }
        }).then(res => {
          const {
            status,
            data
          } = res;
          if (status) {
            if (data) {
              this.myAchieve = data.integral;
            } else {
              this.myAchieve = 0;
              this.toast('本月暂时无业绩积分喔，请重新换个月份查询');
            }
          }
        });
      },
      handleConfirm(e) {
        const getDate = new Date(e.detail);
        this.achieveDate = this.$dayjs(e.detail).format('YYYY-MM')
        this.achieveTime.year = getDate.getFullYear();
        this.achieveTime.month = getDate.getMonth() + 1;
        this.getCurrentAchive();
        this.popupShow = false;
      }
    }
  }
</script>

<style lang="less" scoped>
  .achieve {
    min-height: 100vh;
    background-color: #f7f7f7;

    /deep/ .van-tab {
      &__pane {
        margin-top: 30rpx;
      }

      &--active {
        .van-ellipsis {
          color: @color-theme;
        }
      }
    }

    .top-form {
      padding: 20rpx;
      background: #fff;

      /deep/ .van-cell {
        padding: 10rpx 30rpx;
        background: #f5f5f5;

        &__value {
          color: #000;
        }
      }
    }
  }
</style>